<template>
  <div class="ent">
      <div class="header">
          办公室调休表
      </div>
     <div class="top">
         <div class="bol">
             <img src="../assets/logo.png" alt="">
         </div>
         <div class="left">
             <span>申请人姓名 ：王佳雪</span>
             <span>直接主管 ：魏红梅</span>
         </div>
     </div>
     <div class="btu">
         <div class="he">
             申请信息
         </div>
         <div class="xx">
             <span>休假日期 <input type="text" placeholder="请输入日期"></span>
         </div>
         <div class="xx">
             <span>休假类型</span>
         </div>
         <div class="xx">
             <span>休假起始日期 <input type="text" placeholder="请输入日期"></span>
         </div>
         <div class="xx">
             <span>休假截止日期 <input type="text" placeholder="请输入日期"></span>
         </div>
     </div>
     <div class="zhong">
         <span>休假事由</span>
     </div>
     <div class="xia">
         <span>取消</span>
         <span>提交</span>
     </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
*{
    padding: 0;
    margin: 0;
}
.ent{
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background: #eee;
}
.header{
    height: 50px;
    line-height: 50px;
    background: green;
    font-size: 20px;
    color: #fff;
}
.top{
    width: 100%;
    height: 150px;
    background: green;
    border-radius: 0 0 50px 50px;
    display: flex;
    justify-content:space-around;
    position: absolute;
}
.bol{   
    height: 70%;
    width: 30%;
    padding: 0 20px;
    background: green;
    img{
        width: 100%;
        height: 100%;
        border-radius: 40%;
    }
}
.left{
     background: green;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    text-align: center;
    color: #fff;
    line-height: 50px;
}
.btu{
    width: 80%;
    height: 399px;
    background: #fff;
    text-align: center;
    position: relative;
    top: 120px;
    left: 50px;
    border-radius: 12px;
    .he{
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        border-bottom: 1px solid #ccc;
        padding:0 10px; 
    }
     .xx{
         width: 100%;
         height: 50px;
         display: flex;
         justify-content:space-between;
         line-height: 50px;
         font-size: 20px;
         color: #ccc;
         span{
             display: block;
             padding:20px 5px;
         }
     }
}
.zhong{
    position: relative;
    border-radius: 12px;
    top: 150px;
    left: 48px;
    width: 80%;
    height: 80px;
    background: #fff;
    display: flex;
    justify-content:space-between;
   span{
        display: block;
        width: 100%;
        height: 20px;
        border-bottom: 1px solid #000;
        font-size: 14px;
        padding: 0 5px;
    }
}
.xia{
    display: flex;
    justify-content:space-between;
    width: 100%;
    height: 50px;
    position: relative;
    bottom: -161px;
    left: 0px;
    background: #fff;
    span:nth-child(1){
        display: block;
        width: 50%;
        line-height: 50px;
        text-align: center;
        background: #ccc;
        font-size: 20px;
    }
    span:nth-child(2){
        display: block;
        width: 50%;
        line-height: 50px;
        text-align: center;
        background:green;
        color: #fff;
        font-size: 20px;
    }
}
</style>